<template>
  <div class="mb-info" v-loading="loading">
    <div class="mb-detail">
      <div class="mb-detail-hd-icon">
        <JIcon :icon="DFT_ICONS.hook" class="fa fa-superpowers"></JIcon>
      </div>
      <div class="mb-detail-hd-info">
        <div class="mb-detail-hd-title">面向切面低码</div>
        <div class="mb-detail-hd-mark" style="color: #666;font-weight: bold;">注意：切面低码不支持事务
        </div>
      </div>
      <el-button
        class="app-group-add-btn"
        type="text"
        size="small"
        @click="handleClearCache">
        <template #icon>
          <JIcon :icon="DFT_ICONS.refresh" />
        </template>
        刷新缓存
      </el-button>
      <el-button
        class="app-group-add-btn"
        type="text"
        size="small"
        @click="handleShowCreate">
        <template #icon>
          <JIcon :icon="DFT_ICONS.add" />
        </template>
        添加切面
      </el-button>
    </div>
    <div class="m-table-container" ref="datasContainer">
      <el-table
        :data="hooks"
        size="small"
        row-key="mb_id"
        :tree-props="{ children: 'subs' }"
        :height="datasTableHeight"
        class="m-table"
        indent="0"
        default-expand-all>
        <el-table-column prop="app_id" label="所属应用">
          <template #default="scope">
            <div v-if="scope.row.app">{{ scope.row.app.group_name }}</div>
            <div>-</div>
          </template>
        </el-table-column>
        <el-table-column prop="action_type" label="切面低码类型">
          <template #default="scope">
            <el-tag size="small">
              <span v-if="scope.row.type === 1">微接口（API）</span>
              <span v-else-if="scope.row.type === 2">函数方法（Func）</span>
              <span v-else-if="scope.row.type === 3">表单接口（Form）</span>
              <template v-if="scope.row.type === 3">
                <i class="el-icon-left"></i>{{ scope.row.form ? scope.row.form.form_name : '' }}
                <i class="el-icon-right"></i>
              </template>
            </el-tag>
            <template v-if="scope.row.type !== 2">
              <i class="el-icon-right" style="line-height: 23px;margin: 0 5px;color: #999;"></i>
              <el-tag type="success" size="small">
                <span v-if="scope.row.action_type === 1">替换</span>
                <span v-else-if="scope.row.action_type === 2">前置 AOP</span>
                <span v-else-if="scope.row.action_type === 3">后置 AOP</span>
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="hook" label="切入点（函数/接口）">
          <template #default="scope">
            <el-tag
              type="warning"
              size="small"
              v-copy="scope.row.hook"
              v-tippy="{ arrow: true, placement: 'right' }"
              content="点击复制"
            >{{ scope.row.hook }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="func_id" label="替换实现（微接口/微函数）">
          <template #default="scope">
            <el-tag v-if="scope.row.type !== 2 && scope.row.api" size="small">微接口：{{
                scope.row.api.api_name
              }}
            </el-tag>
            <el-tag v-if="scope.row.type === 2 && scope.row.func" size="small">微函数：{{
                scope.row.func.func_name
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
          align="center"
          fixed="right">
          <template #default="scope">
            <el-button
              size="small"
              type="text"
              v-tippy="{ arrow: true }"
              content="修改"
              @click="handleShowEdit(scope.row)">
              <template #icon>
                <JIcon :icon="DFT_ICONS.edit" />
              </template>
              修改
            </el-button>
            <el-button
              size="small"
              type="text"
              v-tippy="{ arrow: true }"
              content="删除"
              @click="handleRemove(scope.row)">
              <template #icon>
                <JIcon :icon="DFT_ICONS.delete" />
              </template>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      v-model="formApiWinShow"
      :title="formApiWinName"
      :close-on-click-modal="false"
      :append-to-body="true">
      <hook
        v-if="formApiWinShow"
        :current-data="hookForm"
        @close="handleClose" />
    </el-dialog>

    <ResizeObserver @notify="handleResize"/>
  </div>
</template>

<script setup>
import {ref, onMounted, watch, nextTick} from 'vue';
import _ from 'lodash';
import { ResizeObserver } from 'vue3-resize'
import hook from './hook.vue';
// import FormTemplate from "../../form/form-template";
import {api} from "@jzl/api";
import {$jui} from '@jzl/utils';
import {DFT_ICONS} from "@jzl/icons";

const loading = ref(false);
const selectedData = ref(null);
const actionType = ref('view'); // createOption | createOptionBefore | createOptionChild | edit
const datasTableHeight = ref(500);
const hooks = ref([]);
const formApiWinName = ref('新增/修改切面钩子低码');
const formApiWinShow = ref(false);
const flowWinShow = ref(false);
const flowWinName = ref('');
const apiData = ref(null);
const appId = ref(null);
const type = ref(4);
const form = ref(null);
const formFuncWinName = ref('');
const formFuncWinShow = ref(false);
const hookForm = ref(null);

const init = async () => {
  await loadApis();
  handleResize();
};

const handleResize = () => {
  nextTick(() => {
    if (!datasContainer.value) return;

    let rect = datasContainer.value.getBoundingClientRect();
    let height = _.get(rect, 'height');
    if (height > 0) {
      datasTableHeight.value = height;
    }
  });
};

const loadApis = async () => {
  hooks.value = [];
  loading.value = true;

  let hooksData = await api.hook.getAll();

  loading.value = false;
  hooks.value = hooksData;
};

const handleClearCache = async () => {
  let ret = await api.hook.clearCache();
  if (ret) $jui.toast('操作成功！');
};

const handleShowCreate = () => {
  hookForm.value = null;
  formApiWinShow.value = true;
};

const handleShowEdit = (hook) => {
  hookForm.value = hook;
  formApiWinShow.value = true;
};

const handleClose = () => {
  formApiWinShow.value = false;
  loadApis();
};

const handleRemove = (option) => {
  let dt = option;

  if (!dt) return;

  let msg = `确定删除【${dt.hook}】?`;
  $jui.confirm(msg).then(async () => {
    loading.value = true;

    let ret = await api.hook.remove(dt.id);

    if (ret) {
      await loadApis();
    }

    loading.value = false;
  }).catch(e => { /* handle error */
  });
};

onMounted(() => {
  init();
});

const datasContainer = ref(null);
</script>

<style lang="scss" scoped>
.mb-info {

}
</style>
